<template>
  <div class="top">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/Classification">课程管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/Classification">分类管理</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div class="middel">
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="课程分类名称">
        <el-input
          v-model="queryInfo.courseClassifyName"
          placeholder="请输入课程分类名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="openDialog('add')">新增课程分类</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="batchDelete" :disabled="multipleSelection.length === 0">
          批量删除
        </el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="content">
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :loading="loading"
      border
      stripe
      class="category-table"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="100" align="center" />
      <el-table-column prop="icon" label="图标" min-width="120" align="center">
        <template #default="scope">
          <img
            v-if="scope.row.icon"
            :src="`http://localhost:8080${scope.row.icon}`"
            alt="icon"
            style="
              display: block;
              margin: 0 auto;
              max-width: 40px;
              max-height: 40px;
              border-radius: 8px;
              border: 1px solid #eee;
              background: #fafbfc;
            "
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="分类名称"
        min-width="300"
        align="center"
        show-overflow-tooltip
      />

      <el-table-column label="操作" min-width="200" align="center">
        <template #default="scope">
          <div style="display: flex; justify-content: center; gap: 16px">
            <el-button size="small" type="primary" @click="openDialog('edit', scope.row)"
              >编辑</el-button
            >
            <el-button size="small" type="danger" @click="deleteCategory(scope.row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px"
    />
  </div>

  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="400">
    <el-form :model="form" label-width="100px" class="dialog-form">
      <el-form-item label="分类名称" required>
        <el-input v-model="form.name" autocomplete="off" maxlength="30" show-word-limit />
      </el-form-item>
      <el-form-item label="图标">
        <el-upload
          class="upload-demo"
          action="http://localhost:8080/upload"
          :with-credentials="true"
          :show-file-list="false"
          :on-success="
            (res) => {
              if (res.code === 200) form.icon = res.data
            }
          "
          accept="image/*"
          list-type="picture-card"
        >
          <template v-if="form.icon">
            <img :src="`http://localhost:8080${form.icon}`"
              alt="icon"
              style="width: 100%; height: 100%; object-fit: contain"
            />
          </template>
          <template v-else>
            <el-icon><Plus /></el-icon>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, type TableInstance } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 查询参数
const queryInfo = reactive({
  id: '',
  courseClassifyName: '',
  pageSize: 10,
  pageNum: 1,
})

// 表格数据和分页
const tableData = ref([])
const total = ref(0)
const loading = ref(false)

// 选择相关
const multipleTableRef = ref<TableInstance>()

const axios = getCurrentInstance().appContext.config.globalProperties.axios

// 弹窗表单
const dialogVisible = ref(false)
const dialogTitle = ref('新增课程分类')
const form = reactive({
  id: '',
  name: '',
  icon: '',
})
let dialogMode = 'add'

// 查询列表时字段映射
const queryDataList = () => {
  loading.value = true
  axios
    .post('courseClassification/page', {
      name: queryInfo.courseClassifyName,
    },
    { params: {
        pageSize: queryInfo.pageSize,
        pageNum: queryInfo.pageNum,
      }
    })
    .then((response) => {
      if (response && response.code === 200) {
        tableData.value = (response.data.list || []).map((item) => ({
          id: item.id,
          name: item.name,
          icon: item.icon,
        }))
        total.value = response.data.total || 0
      } else {
        ElMessage.error(response.message || '查询失败')
      }
    })
    .catch(() => {
      ElMessage.error('网络请求错误，请检查网络连接或服务器状态')
    })
    .finally(() => {
      loading.value = false
    })
}

onMounted(() => {
  queryDataList()
})

// 搜索
const search = () => {
  queryInfo.pageNum = 1
  queryDataList()
}

// 分页
const handleSizeChange = (size: number) => {
  queryInfo.pageSize = size
  queryDataList()
}
const handleCurrentChange = (num: number) => {
  queryInfo.pageNum = num
  queryDataList()
}

// 打开弹窗
function openDialog(mode: 'add' | 'edit', row?: any) {
  dialogMode = mode
  if (mode === 'add') {
    dialogTitle.value = '新增课程分类'
    form.id = ''
    form.name = ''
    form.icon = ''
  } else if (mode === 'edit' && row) {
    dialogTitle.value = '编辑课程分类'
    form.id = row.id
    form.name = row.name
    form.icon = row.icon
  }
  dialogVisible.value = true
}

// 新增/编辑提交
function submitForm() {
  if (!form.name.trim()) {
    ElMessage.warning('请输入分类名称')
    return
  }
  if (dialogMode === 'add') {
    console.log(form)
    axios
      .post('courseClassification', {
        name: form.name,
        icon: form.icon,
      })
      .then((resp: any) => {
        if (resp.code === 200) {
          ElMessage.success('新增成功')
          dialogVisible.value = false
          queryDataList()
        } else {
          ElMessage.error(resp.message || '新增失败')
        }
      })
  } else if (dialogMode === 'edit') {
    console.log(form)
    console.log(1111)
    axios
      .put('courseClassification', {
        id: form.id,
        name: form.name,
        icon: form.icon,
      })
      .then((resp: any) => {
        if (resp.code === 200) {
          ElMessage.success('编辑成功')
          dialogVisible.value = false
          queryDataList()
        } else {
          ElMessage.error(resp.message || '编辑失败')
        }
      })
  }
}

// 删除
function deleteCategory(id: number) {
  ElMessageBox.confirm('确定要删除该分类吗？', '提示', {
    type: 'warning',
  }).then(() => {
    axios.delete(`courseClassification/${id}`).then((resp: any) => {
      if (resp.code === 200) {
        ElMessage.success('删除成功')
        queryDataList()
      } else {
        ElMessage.error(resp.message || '删除失败')
      }
    })
  })
}
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val.map((item) => {
    return item.id
  })
}
// 批量删除
function batchDelete() {
  ElMessageBox.confirm('确定要删除此课程吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      const ids = multipleSelection.value.map((item: any) => item.id).join(',')
      axios
          .delete('courseClassification/batch', {
            params: { ids },
          })
        .then((resp) => {
          if (resp.code == 200) {
            queryDataList()
            ElMessage.success('删除成功')
          } else {
            ElMessage.error('删除失败')
            console.log(multipleSelection.value)
          }
        })
        .catch((error) => {
          console.error('Error:', error)
          ElMessage.error('请求出错，请重试')
        })
    })
    .catch(() => {
      // 用户取消操作
    })
}
</script>

<style scoped>
.top {
  background-color: #f8f9fa;
  padding: 12px 20px;
  margin-bottom: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.el-breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
}
.middel {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.demo-form-inline {
  display: flex;
  align-items: center;
  gap: 15px;
}
.demo-form-inline .el-form-item {
  margin-right: 20px;
}
.demo-form-inline .el-input,
.demo-form-inline .el-select {
  width: 220px;
}
.el-button {
  min-width: 100px;
}
.el-button + .el-button {
  margin-left: 10px;
}
.content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.category-table {
  background: #fff;
  border-radius: 8px;
}
.el-table {
  margin-bottom: 20px;
}
.el-table__header-wrapper {
  border-radius: 6px 6px 0 0;
}
.el-table__body-wrapper {
  border-radius: 0 0 6px 6px;
}
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px !important;
}
.dialog-form {
  padding-top: 10px;
}
</style>
